<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*
           限定最小宽度是980的时候是pc端
        */
        *{
            margin: 0;
            padding: 0;
        }
       body,#outer, ul{
             width: 100%;
           /*
            给父级设置overflow清除浮动，但是不能同时设置高
           */
           /*overflow: hidden;*/
        }
         ul li{
             list-style: none;
             float: left;
             height: 150px;
         }
         /*
         第二种清除浮动的方法
         */
         h2{
             height: 30px;
             clear: left;
             background-color: aquamarine;
         }
         /*
          凡是带：这种形式的叫做伪类选择器  css3中新增加的选择器
          凡是带::这种形式的叫做伪元素选择器，css3中新增加的选择器
         */
        li:nth-child(1){
            background-color: red;
        }
        li:nth-child(2){
            background-color: blue;
        }
        li:nth-child(3){
            background-color: green;
        }
        li:nth-child(4){
            background-color: orangered;
        }
        @media all and (min-width: 981px){
             li{width: 25%}
        }
        /*
           最小宽度是768px，最大宽度是980的时候属于ipad端
        */
        @media screen and (min-width: 768px) and (max-width: 980px){
            li{width: 50%}
        }
        /*
          最大宽度是767px属于移动端
        */
        @media screen and  (max-width: 767px){
            li{width: 100%}
        }

    </style>
</head>
<body>
    <!--
       1、熟练搭建商业网站布局框架（html+css）
       2、搭建自适应布局，或者是流式布局----主要内容    （百分比搭建） 一般用在新闻资讯类网站
       3、响应式布局------跨平台布局（pc，ipad，移动端）
    -->
<!--
  业务需求：
  假如现在有一个容器，div，宽高自适应
  （1）在pc端，div背景颜色显示成红色     宽>980
  （2）在ipad端，div背景颜色显示成蓝色   768--980
  （3）在移动端，div背景颜色显示成绿色   <768
  思考？？？？？
  （1）在pc端，这个div里面有四个容器，要求排列在一排
  （2）在ipad端，要求两个一排，两个一排
  （3）在移动端，要求一排显示一个

-->
  <div id="outer">
       <ul>
           <li>第一个</li>
           <li>第二个</li>
           <li>第三个</li>
           <li>第四个</li>
       </ul>
  </div>
<h2>我是一个标题</h2>
</body>
</html>